<template>
    <view v-if="showPopUp" class="pop-up flex flex_center">
        <view class="container">
            <view class="con">
                <view class="title">标题</view>
                    <scroll-view scroll-y="true" class="content" scroll-left="0" style="width: 93%">
                      <view v-html="content"></view>
                    </scroll-view>
            </view>
            <view v-for="(item,index) in btnArr" :key="index" class="btn" @click="onclik">{{item}}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        btnArr: { type: Array,default: function() { return ['关闭'] } },
    },
    data() {
      return {
        content: `<p style="color: red">1222</p><p style="color: black">11111</p><h5 style="color:yellow">我不知道</h5>
        <p style="color: red">1222</p><p style="color: black">111www11</p><h5 style="color:yellow">我不知道</h5>
        <p style="color: red">w</p><p style="color: black">111ww11</p><h5 style="color:yellow">我不22知道</h5>
        <p style="color: red">12www22</p><p style="color: black">111ww11</p><h5 style="color:yellow">我33不知道</h5>
        <p style="color: red">12www22</p><p style="color: black">111ww11</p><h5 style="color:yellow">我不444知道</h5>`,
        showPopUp:false
      }
    },
    methods: {
        onclik() {
            this.showPopUp = false
        }
    }
}
</script>

<style scoped lang="scss">
@import '../../assets/global.css';
.pop-up {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    .container {
        width: 80%;
        // height: 50vh;
        .con {
            // width: 80%;
            // height: 60vh;
            // border: 1px solid red;
            background: rgba(255,255,255,1);
            border-radius: 20rpx;
            .title {
                font-size: 40rpx;
                text-align: center;
                padding: 10px 0;
            }
            .content {
                // margin: auto 20rpx;
                padding: 10px;
                font-size: 32rpx;
                // width: 100%;
                height: calc(50vh - 80rpx);
                overflow: auto;
            }
        }
    }
    .btn {
        background: rgba(255,255,255,1);
        // height: 20rpx;
        // line-height: 20rpx;
        width: 100%;
        margin-top: 10rpx;
        border-radius: 20rpx;
        padding: 30rpx 0;
        text-align: center;
        font-size: 30rpx;
    }
}


</style>